<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>学习工坊--响应式模块工具</title>
		<link rel="stylesheet" type="text/css" href="css3/bootstrap.min.css">
			<style type="text/css">

		.a1{width:40%;margin: 0 auto;padding-top:30px; }
		@media (max-width: 768px) {
			.a1{width:100%}
		 }
		@media (min-width: 768px) and (max-width: 992px) {
			.a1{width:60%}
		}
		.navbar-brand{padding: 0 15px;}
		.navbar-brand img{height: 50px;}
	</style>
	</head>
	<body>
<nav class="navbar navbar-default navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="css3/logo.png" ></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      	<li><a href="#">网站规划</a></li>
		<li><a href="#">网站首页模块</a></li>
		<li><a href="#">网站二级页模块</a></li>
		<li><a href="#">网站内容页模块</a></li>      
        <li class="active"><a href="#">响应式网站模块</a></li>
		<li><a href="#">综合训练模块</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">返回学习工坊首页</a></li>       
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

		<div class="a1">
			<ol class="breadcrumb">
			  <li><a href="#">首页</a></li>
			  <li><a href="#">响应式网站模块</a></li>
			  <li class="active">学习工具</li>
			</ol>
			<table class="table table-bordered">
				<tr><td colspan="2" class="text-center">工具快速导航</td></tr>
				<tr>
					<td class="text-center">1</td>				
					<td><a href="index4.html">媒体查询练习场</a></td>				
				</tr>
				<tr>
					<td class="text-center">2</td>				
					<td><a href="index2.html">响应式检测工具</a></td>				
				</tr>
				<tr>
					<td class="text-center">3</td>				
					<td><a href="index1.html">响应式闯关游戏</a></td>				
				</tr>
				<tr>
					<td class="text-center">4</td>				
					<td><a href="index5.html">响应式实现方式练习场</a></td>				
				</tr>
				<tr>
					<td class="text-center">5</td>				
					<td><a href="index0.html">响应式项目提取工具</a></td>				
				</tr>
				<tr>
					<td class="text-center">6</td>				
					<td><a href="index3.html">响应式网站优秀案例库</a></td>				
				</tr>
			</table>
		</div>
	</body>
</html>